<template>
    <div style="background: #f0f2f5; margin:0; min-height: 100vh">
        <div class="login-page" style="min-height: 100%;">
            <el-container>
                <el-aside width="80%">
                    <div class="aside-bg">

                    </div>

                </el-aside>
                <el-main style="background-color: #fff">
                    <div>
                        <div style=" text-align: center;margin-bottom: 20px;">
                            <h2>瑞丰数据服务系统</h2>
                        </div>
                        <div style="margin-top: 60px;">
                            <el-form :model="loginVo" style="width: 80%;margin-left: 10%;">
                                <h3 style="line-height: 50px;">系统登录</h3>
                                <el-form-item>
                                    <el-input prefix-icon="el-icon-user" v-model="loginVo.username"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-input type="password" prefix-icon="el-icon-lock"
                                        v-model="loginVo.password"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button style="width:100%;" type="primary" @click="login">立即登录</el-button>
                                </el-form-item>

                            </el-form>
                        </div>

                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
  
<script>
import loginApi from '@/api/userApi'
export default {
    name: "loginPage",
    data() {
        return {
            loginVo: {
                username: "",
                password: ""
            }
        };
    },
    mounted() {
        if (localStorage.getItem('token') != undefined) {
            this.$router.push("/")
        }
    },
    methods: {
        login() {
            loginApi.login(this.loginVo).then(res => {
                const data = res.data;
                if (data.retCode == 200) {
                    this.$message.success("登录成功")
                    localStorage.setItem('token', data.data.token);
                    this.$router.push("/")
                    return;
                }
                this.$message.error(data.message)
            });
        }
    }

};
</script>
  
<style  scoped>
.aside-bg {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/logo.png');
    background-size: cover;
}
</style>
  